body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,
input,textarea,button,p,blockquote,th,td{margin: 0;padding: 0;}
body{text-align: center;min-width: 1226px;}
li{list-style-type: none;}
a{text-decoration: none;}
img,input,button{border: none;vertical-align: middle;}


.header{
	width: 100%;
	height: 40px;
	line-height: 40px;
	background-color: brown;
}
.wrap{
	width: 1226px;
	margin:0 auto;
}
ul{
	list-style-type: none;
}
.header-left{
	float: left;
}
.header-right{
	float: right;
}
.header li{
	position: relative;
	float: left;
}
.header a{
	color: bisque;
	font-size: 17px;
}
#myButton{
	color: brown;
}
#myButton:hover{
	color: gold;
}
.header a:hover{
	color: gold;     /*鼠标悬浮颜色*/
}
.header span{
	color: brown;
	margin-top: 0 ;
	margin-bottom: 0;
	margin-left: 15px;
}

.cart{
	width: 100px;
	height: 40px;
	cursor: pointer;
}
.tou{
	height: 35px;
	width: auto;
}
.download{
	position: absolute;
	top: 40px;
	left: 50%;
	margin-left: -62px;
	width: 124px;
	height: 0;    /*由148设为0，overflow改为隐藏,同时设置悬停hover*/
	background-color: white;
	box-shadow: 0 1px 5px #aaa;
	overflow: hidden;
	transition: all .3s; 
	z-index: 2;
}
.download>img{
	width: 90px;
	margin: 18px 0 12px;
}
.download>p{
	 font-size: 14px;
	 line-height: 1;
}
.header-right>li:hover>.download{
	height: 148px;
}
.hover-text::after{
	content: '河大tms火影忍者Q群930538570';
	 position: absolute; /* 绝对定位，相对于父元素 */
	  left: 70%; /* 距离父元素左边0px */
	  top: 50px; /* 距离父元素顶部100%，即父元素底部 */
	  display: none; /* 默认不显示 */
	  background-color: black; /* 背景颜色 */
	  color: white; /* 文本颜色 */
	  font-size: 15px;
	  padding: 10px; /* 内边距 */
	  z-index: 1; /* 确保文本在顶层显示 */
	}
	
	.hover-text:hover::after {
	  display: block; /* 鼠标悬浮时显示文本 */
	}
	
	/* head end  */

	/*nav begin*/
.nav{
	position: relative;
	clear: both;  /*清除高度差影响*/
	background-image: url(../img/beijing.png);
	width: 100%;
	height: 100px;
	
	/*background-image: url(/img/beijing.png);
	 z-index: 1;
	background-repeat: no-repeat;
	background-size: cover;   */
}
.logo{
	float: left;
	width: 234px;
	height: 100px;
	text-align: left;
}
.nav-bar{
	float: left;
	width: 696px;
	height: 100px;
	
}
.search{
	position: relative;
	float: left;
  width: 296px;
  height: 50px;
  margin-top: 25px;
}
.logo>img{
	height: 80px;
}
.nav-bar>ul>li{
	float: left;
}
.nav-bar>ul>li>a{
	display: block;
	padding: 38px 10px;
	font-size: 20px;
	color: #e0e0e0;
}
.nav-bar>ul>li>a:hover{
	color: #ff6700;
}
/*下拉列表*/
.nav-bar-list{
	z-index: 3;
	display: none;
	position: absolute; 
	left: 229px;
	width: 50%;
	top: 100px;
	
	height: 229px;
	border-top: 1px solid #e0e0e0;
	background-color: white;
    box-shadow: 0 3px 4px rgba(0, 0, 0, .18);
}
.nav-bar li:hover>.nav-bar-list{
	display: block;
}
.nav-bar-list li{
	width: 204px;
	padding-top: 35px;
	float: left;
}
.nav-bar-img{
	width: 203px;
	height: 110px;
	border-right: 1px solid #e0e0e0;
	margin-bottom: 20px;
}
/* 最后一个li中的div去掉右边框 */
.nav-bar-list li:last-child .nav-bar-img{
	border-right: none;
}

/* 搜索框 */
.search input{
	/* input 和button是行内块,行内块会识别代码之间的空白 */
	float: left;
	width: 223px;
	height: 49px;
	padding: 0 10px;
	border: 1px solid #e0e0e0;
	border-right: none;
	outline: none;   /* 去掉点击时黑色的边框 */
	transition: all .2s;
}
.search button{
	float: left;
	width: 52px;
	height: 50px;
	background-color: white;
	border: 1px solid #e0e0e0;
	transition: all .2s; 
}
.search button:hover{
	background-color: #ff6700;
	border-color: #ff6700;
	color: white;
}
.search input:hover,.search input:hover+button {
	border-color: #b0b0b0;
}
.search input:focus,.search input:focus+button {
	border-color: #ff6700;
}
.hot-list{
	z-index: 4;
	display: none;
	position: absolute;
	left: 0;   top: 50px;
	width: 243px;
	height: 240px;
	border: 1px solid #ff6700;
	border-top: none;
	background-color: white;
}
.hot-list>a{
	display: block;
	color: #424242;
	font-size: 12px;
	padding: 6px 15px;
	text-align: left;
	height: 18px;
}
.hot-list>a:hover{
	background-color: #e0e0e0;
}
.search input:focus~.hot-list{
	display: block;
}

/* banner begin */
/* 轮播图 */
.banner{
	width: 100%;
	height: 530px;
}
.banner-box{
	position: relative;
	width: 100%;
	height: 500px;
	background-color: #424242;
}


.carousel-box{
	width: 1226px;
	height: 500px;
	position: relative;
}
.carousel-img{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: all 1.5s; 
}
.carousel-img:nth-child(1){
	opacity: 1;
}
.cleft{
	position: absolute;
	top: 195px;
	width: 35px;
	height: 70px;
	background-color: #000000;
	color: #ccc;
	border-radius: 0 5px 5px 0;
	text-align: center;
	line-height: 70px;
	font-size: 27px;
}
.cleft:hover{
	background-color: #00000050;
	color: #fff;
}
.cright{
	position: absolute;
	top: 195px;
	width: 35px;
	height: 70px;
	background-color: #000000;
	color: #ccc;
	border-radius: 5px 0 0 5px ;
	text-align: center;
	line-height: 70px;
	font-size: 27px;
	right: 0;
}
.cright:hover{
	background-color: #00000050;
	color: #fff;
}

/* 滑动门 */
.slide{
	position: absolute;
	top: 140px;
	left:0;
	width: 200px;
	height: 500px;
	padding: 15px 0;
	background-color: brown;
}
.slide>ul>li{
	height: 84px;
	line-height: 84px;
	padding-left: 30px;
	text-align: left;
	cursor: pointer;
}
.slide>ul>li:hover{
	background-color: antiquewhite;
}
.slide>ul>li>a{
	color: #e0e0e0;
	font-size: 24px;
}
.slide i{
	float: right;
	margin-right: 20px;
	color: #e0e0e0;
	font-size: 24px;
}
.slide-list{
	display: none;
	position: absolute;
	top: 0;
	left: 234px;
	width: 992px;
	height: 458px;
	border: 1px solid #e0e0e0;
	border-left: none;
	background-color: #fff;
	box-shadow: 0 8px 16px rgba(0, 0, 0, .18) ;
}
.slide li:hover>.slide-list{
	display: block;
}
.slide-list>ul{
	width: 496px;
	float: left;
}
.slide-list li{
	width: 248px;
	height: 100%;
}
.slide-list img{
   width: 100%;
}
/* banner end */

.adv{
	width: 100%;
	height: 170px;
	margin: 14px 0 2px;
}
.adv-aside{
	float: left;
	width: 228px;
	height: 164px;
	padding: 3px;
	background-color: #5f5750;
}
.adv-img{
	float: left;
	width: 316px;
	height: 170px;
	background-color: #aaa;
	margin-left: 14.66px;
	transition:  all .2s linear;
}
.adv-img img{
	width: 100%;
}
/* 渐变盒阴影 */
.adv-img:hover{
	box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
}
.adv-aside li{
	float: left;
	width: 76px;
	height: 82px;
}
.adv-aside i{
	margin-bottom: 4px;
	margin-top: 18px;
	display: block;
	font-size: 22px;
}
.adv-aside a{
	color: #fff;
	font-size: 14px;
    opacity: .7;	
	transition: all .2s;
}
.adv-aside a:hover{
	opacity: 1;
}

/* 主体部分begin */
.contant{
	width: 100%;

	padding: 4px 0 12px;
}
.home-box{
	width: 100%;
	height: 180px;
	margin: 1px 12px 0 0;
}
.home-box img{
	float: left;
	margin: 28px;
}

.left{
	font-size: 25px;
	font-weight: 200px;
	color: #e1e1e1;
	line-height: 58px;
	background-image: url(../img/botbg09.png);
}
.right{
	text-align: right;
	font-size: 15px;
	font-weight: 200px;
	color: #333;
	line-height: 58px;
}
.demo-box{
	width: 100%;
	height: 614px;
	
}
.demo-box-left {
    float: left;
    width: 234px;
    height: 614px;
	background-color: #e1e1e1;
    transition: all .2s linear;
}
.demo-box-right{
    float: left;
    width: 992px;
    height: 614px;
}
 
.items {
	position: relative;
    float: left;
    width: 234px;
    height: 300px;
    background-color: #e1e1e1;
    margin-bottom: 14px;
    margin-left: 14px;
    transition: all .2s linear;
}
 
.items:hover, .phone-box-left:hover,.items1 div:hover,.video-box li:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
}
 
/* .goods-img {
    width: 160px;
    margin-top: 20px;
    margin-bottom: 18px;
} */
.demo-box-right a{
	display: block;
}
.items-title{
	position: absolute;
	top: 2px;
	left: 2px;
	font-size: 20px;
	font-weight: 600;
}
.video-img{
	position: relative;
	width: 100%;
	height: 180px;
	margin-bottom: 28px;
}
.video-img img{
	margin-top: 40px;
	width: 234px;
	height: auto;
}
.items a{
	overflow-wrap: break-word;
}
.demo-box-right p{
	width: 100%;
	height: 21px;
	color: #333;
	font-size: 14px;
	margin: 0 auto 6px;
	white-space: nowrap;
	overflow: hidden;
}
.play{
    position: absolute;
    left: 20px;
    bottom: 10px;
    width: 36px;
    height: 24px;
    border: 2px solid #fff;
    box-sizing: border-box;  /* 令设置的边框和内边距的值是包含在 width */
    border-radius: 12px;
	background-color: rgba(0, 0, 0, .6);
    transition: all .2s ;
}
/* 绘制三角形 */
.play>span{
	width: 0;
	height: 0;
	display: inline-block;
	border-left: 8px solid #fff;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
}
.play>div{
    width: 0;
    height: 0;
    border-left: 8px solid #fff;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    margin: 0 auto;
    margin-top: 3px;
}
.video-img:hover>.play{
    border-color: #ff6700;
    background-color: #ff6700;
}

.ge{
	height: 45px;
	overflow: hidden;
}

/* footer begin */
.footer{
    background-color: #fff;
}
.footer-links{
	padding: 20px 0;
	height: 172px;
}
.footer-links ul{
	float: left;
	width: 155px;
	text-align: left;
}
.footer-links li{
	height: 18px;
	margin-top: 10px;
	font-size: 14px;
	color: #e1e1e1;
}
.footer-links li:first-child{
	height: 17px;
	margin: -1px 0 26px;
}
.footer-links li a{
	font-size: 12px;
	color: #757575;
}
.banquan{
	float: right;
	width: 280px;
	height: 170px;
	padding: 1px;
}
.banquan-inform{
	font-size: 11px;
	color: #757575;
}
	
.gaozhi{
	width: 100%;
	height: 80px;
}
.gaozhi p{
	font-size: 11px;
	color: #757575;
}
body{
	background-image: url(../img/bg08.jpg);
}
.footer{
	background-image: url(../img/botbg09.png);
}